cps05boxfandomcom-20200214-history
Search Example
not done Starting We have a search box and a "GO" button. Here's the HTML markup for them: Also, as you can see, there's a element below (link). It is hidden, and the script in the next part of the page will simulate a click on this link. Creating a triggering function Now, lets create a function in JavaScript that will be triggered when pressing the "GO" button, and direct us to the search page. Lets call it on this example "searchForSomething": /* our function */ function searchForSomething() { // our script will go here } What will the search page be? When typing in google: site:http://example.com some text It will search in google for the string "some text" in the website http://example.com. The target URL in goolge's website is: https://www.google.com/#q=site:http:%2F%2Fexample.com+some%20text This URL is actually made of 3 parts: #The URL https://www.google.com/#q= #The word "site:" followed by a URL encoded version for the site that you placed after "site:". In JavaScript, a URL string is encoded using encodeURIComponent(your_string) #A + sigh followed by a URL encoded version for your text. Before the encoding, all the spaces are replaced by + marks. The reason why encoding is needed is because some cahracters have special role in URLs. For instance, ? marks and & are used to define "parameters" in the URL. So the encoding makes sure that even if you insert one of those key characters, they would not affect the search results. Directing to the correct search rsult page Now, if we know that the final URL for the results is https://www.google.com/#q=site: followed by a URL encoded version for the site on which you want to search, followed by your search string, we can use this info to create the target URL for the search results, and direct the reader to it. First of all, lets see how to use JavaScript's encodeURLComponent() to encode the text that represents the website that you want to look for: encodeURIComponent("http://example.com") And for the text that you want to look for. Before we encode it, we need to replace the spaces with +. It is done using: "your string".replace(/ /g, "+") /* because the string is taken from the search box, that has an id attribute of "search-box", we can use JavaScript to get the value automatically */ $("#search-box").val().replace(/ /g, "+") It may be easier to store these values in variables, and then combine them: var someString = $("#search-box").val().replace(/ /g, "+"), encodedSite = encodeURIComponent("http://example.com"), google = "https://www.google.com/#q=site:", finalLink = google + encodedSite + "+" + someString; The variable someString combines all of the parts that together make the URL link to the search result page on google. Setting the link Now, lets give the hidden link a new target, to the search results page that we want. We will set it to the value of the variable finalLink from the previous section: var someString = $("#search-box").val().replace(/ /g, "+"), encodedSite = encodeURIComponent("http://example.com"), google = "https://www.google.com/#q=site:", finalLink = google + encodedSite + "+" + someString; $("a#search-link").attr("href", finalLink); In additional, it's needed to simulate a click. It's done in JavaScript using the click() method: var someString = $("#search-box").val().replace(/ /g, "+"), encodedSite = encodeURIComponent("http://example.com"), google = "https://www.google.com/#q=site:", finalLink = google + encodedSite + "+" + someString; $("a#search-link").attr("href", finalLink); $("a#search-link")0.click(); Finally.. Now, all there's left is to merge all of the code into a single function, and call this function when the "GO" button is clicked: function searchForSomething() { var someString = $("#search-box").val().replace(/ /g, "+"), encodedSite = encodeURIComponent("http://example.com"), google = "https://www.google.com/#q=site:", finalLink = google + encodedSite + "+" + someString; $("a#search-link").attr("href", finalLink); $("a#search-link")0.click(); } $("#search-button").click(function() { searchForSomething(); });